<template>
	<view class="collect">
		<view class="collect-con">
			<navigator :url="`../../kind/detail/detail?id=${item.id}`" class="collect-item" v-for="item in collectList">
				<image :src="item.cover_img" mode=""></image>
				<view class="info">
					<view class="title">
						{{ item.gname }}
					</view>
					<view class="bh">
						编号：{{ item.pcode }}
					</view>
					<view class="guige">
						规格：长430X宽522X高848mm
					</view>
					<view class="collect-count">
						<text>收藏：360</text>
						<text class="price">￥{{ item.price_now }}</text>
					</view>
				</view>
		</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				collectList: []
			};
		},
		onShow() {
			uni.setNavigationBarTitle({
			　　title:'收藏列表'
			});
			this.collectList = uni.getStorageSync('collectList');
			console.log(this.collectList);
		}
	}
</script>

<style lang="scss">
	.collect {
		width: 100%;
		min-height: 100vh;
		max-height: 100%;
		background-color: #354E44;
		.collect-con {
			width: 100%;
			min-height: 100vh;
			height: 100%;
			background-color: #F1ECE7;
			border-radius: 50rpx 50rpx 0 0;
			box-sizing: border-box;
			padding: 64rpx 38rpx 0 40rpx;
			.collect-item {
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 34rpx 37rpx 32rpx 54rpx;
				background-color: #fff;
				border-radius: 20rpx;
				margin-bottom: 40rpx;
				image {
					width: 140rpx;
					height: 140rpx;
				}
				.info {
					flex: 1;
					margin-left: 66rpx;
					.title {
						font-size: 26rpx;
						color: #3E3E3E;
						letter-spacing: 1.86rpx;
						font-weight: 800;
					}
					.bh,.guige {
						font-size: 22rpx;
						color: #8D8D8D;
						letter-spacing: 1.57rpx;
					}
					.collect-count {
						margin-top: 12rpx;
						display: flex;
						justify-content: space-between;
						font-size: 24rpx;
						color: #3E3E3E;
						letter-spacing: 1.71rpx;
						.price {
							font-size: 28rpx;
							letter-spacing: 2rpx;
						}
					}
				}
			}
		}
	}
</style>
